<template>
  <div class="content">
    <div class="left">
      <ul>
        <li>
          <router-link to="/">首页</router-link>
        </li>
        <li :class="{isclick:this.$route.name==='UserInfo'}">
          <router-link to="/backend/userinfo">个人资料</router-link>
        </li>
        <li><a href="#">账号设置</a></li>
        <li><a href="#">消息通知</a></li>
        <li :class="{isclick:this.$route.name==='ArticleList'}">
          <router-link to="/backend/articleList">文章管理</router-link>
        </li>
        <li :class="{isclick:this.$route.name==='AddArticle'}">
          <router-link to="/backend/addarticle">添加文章</router-link>
        </li>
        <li v-if="userinfo.is_superuser"><a href="http://127.0.0.1:8000/admin"
                                            target="_blank">后台管理</a></li>
        <li><span @click="Logout">注销</span></li>
      </ul>
    </div>
    <div class="right">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import cookie from "js-cookie";
import {mapState, mapActions} from "vuex";

export default {
  name: "Backend",
  methods: {
    ...mapActions('Backend', ['getavatars']),
    ...mapActions('Account', ['logout']),
    // 注销
    Logout() {
      this.logout().then(value => {
        if (value['code'] === 200) {
          cookie.remove('userinfo')
          this.$store.commit('cleadUserInfo')
          this.$router.push({
            name: 'home'
          })
        }
      })
    }
  },
  computed: {
    ...mapState(['userinfo']),
  },
  mounted() {
    this.getavatars()
  }
}
</script>

<style scoped lang="less">
.content {
  display: flex;
  height: 100%;

  .left {
    width: 15%;
    height: calc(100% - 100px);
    background-color: #282829;
    padding-top: 100px;

    li {
      text-align: center;
      line-height: 30px;

      &:hover {
        background-color: #202021;
        cursor: pointer; //悬浮时变手指
      }


      span, a {
        color: white;
      }
    }

    .isclick {
      background-color: #202021;

      a {
        color: #dd6161;
      }
    }
  }

  .right {
    width: 85%;
    background-color: #F0EEEE;
    padding: 20px 20px 0 20px;
    height: calc(100% - 20px);
  }
}
</style>